<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第三方登录 Demo</title>
    <style>
        body { font-family: Arial, Helvetica, sans-serif; }
        .login-btn { margin: 8px 8px 8px 0; padding: 10px 28px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; color: #fff; }
        .dingtalk { background: #007fff; }
        .wechat_enterprise { background: #00b3b3; }
        .wechat_mini_program { background: #26c6da; }
        .wechat_mp { background: #06c05f; }
        .qq { background: #12B7F5; }
        .alipay { background: #1677FF; }
        .github { background: #333; }
        .gitee { background: #c71d23; }
        .qr { margin: 20px 0; }
        #qrcode img { border: 1px solid #ddd; padding: 5px; background: #fff; }
    </style>
</head>
<body>
<h2>第三方登录演示</h2>
<div>
    <button class="login-btn dingtalk" onclick="doLogin('dingtalk')">钉钉登录</button>
    <button class="login-btn wechat_enterprise" onclick="doLogin('wechat_enterprise')">企业微信</button>
    <button class="login-btn wechat_mini_program" onclick="doLogin('wechat_mini_program')">微信小程序</button>
    <button class="login-btn wechat_mp" onclick="doLogin('wechat_mp')">微信公众号</button>
    <button class="login-btn qq" onclick="doLogin('qq')">QQ登录</button>
    <button class="login-btn alipay" onclick="doLogin('alipay')">支付宝登录</button>
    <button class="login-btn github" onclick="doLogin('github')">GitHub登录</button>
    <button class="login-btn gitee" onclick="doLogin('gitee')">Gitee登录</button>
</div>

<hr>
<h3>二维码扫码登录</h3>
<div>
    <select id="qrType">
        <option value="wechat_mp">微信公众号</option>
        <option value="dingtalk">钉钉</option>
        <option value="wechat_enterprise">企业微信</option>
        <option value="qq">QQ</option>
    </select>
    <button onclick="showQRCode()">显示二维码</button>
</div>
<div id="qrcode" class="qr"></div>

<script>
    // 直接跳转登录
    function doLogin(type) {
        window.location.href = '/oauth/login/' + type;
    }

    // 获取二维码登录
    function showQRCode() {
        var type = document.getElementById('qrType').value;
        fetch('/oauth/login/' + type, {redirect: 'manual'})
            .then(res => {
                if (res.status === 302) {
                    var url = res.headers.get('Location');
                    document.getElementById('qrcode').innerHTML =
                        '<img src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=' +
                        encodeURIComponent(url) + '" alt="二维码" />' +
                        '<div style="margin-top: 10px; color: #666;">请使用对应APP扫码</div>';
                } else {
                    document.getElementById('qrcode').innerHTML =
                        '<span style="color:red;">获取二维码失败</span>';
                }
            });
    }
</script>
</body>
</html>